<!-- 左 -->
<template>
  <div class="letfl">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#000"
      text-color="#fff"
    >
      <!-- //点击跳转 -->
      <el-menu-item index="1" @click="yi">
        <i class="el-icon-location"></i>
        <span slot="title">房源管理</span>
      </el-menu-item>
      <!-- 直播管理 -->
      <el-menu-item index="9" @click="zhi">
        <i class="el-icon-menu"></i>
        <span slot="title">直播管理</span>
      </el-menu-item>
      <el-menu-item index="2" @click="er">
        <i class="el-icon-menu"></i>
        <span slot="title">团购管理</span>
      </el-menu-item>
      <el-menu-item index="3" @click="san">
        <i class="el-icon-document"></i>
        <span slot="title">审核管理</span>
      </el-menu-item>
      <el-menu-item index="4" @click="dingdan">
        <i class="el-icon-setting"></i>
        <span slot="title">订单管理</span>
      </el-menu-item>
      <el-menu-item index="5" @click="wu">
        <i class="el-icon-setting"></i>
        <span slot="title">权限管理</span>
      </el-menu-item>
      <el-menu-item index="6" @click="zhixiun">
        <i class="el-icon-setting"></i>
        <span slot="title">咨询管理</span>
      </el-menu-item>
      <el-menu-item index="7" @click="jngji">
        <i class="el-icon-setting"></i>
        <span slot="title">经纪人管理</span>
      </el-menu-item>
      <el-menu-item index="8" @click="si">
        <i class="el-icon-setting"></i>
        <span slot="title">我的管理系统</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isCollapse: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    yi() {
      //首页
      this.$router.push("/Home");
    },
    er() {
      //团购管理
      this.$router.push("/list");
    },
    san() {
      //审核管理
      this.$router.push("/Mold");
    },
    si() {
      //我的管理系统
      this.$router.push("/Many");
    },
    wu() {
      //权限呜呜呜u五u呜呜呜呜呜呜
      this.$router.push("/quanxian");
    },
    liu() {
      //不知道 呜呜呜u五u呜呜呜呜呜呜
      this.$router.push("/Home");
    },
    dingdan() {
      //订单管理       jngji
      this.$router.push("/Kangyi");
    },
    zhixiun() {
      //咨询管理
      this.$router.push("/Kanger");
    },
    jngji() {
      //经纪人管理
      this.$router.push("/Kangsan");
    },
    zhi() {
      //直播管理
      this.$router.push("/Zhibo");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
// ui
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.letfl {
  width: auto;
  height: 100%;
  background: #000;
}
</style>